<template>
  <!-- 如果有子菜单，就渲染成sub-menu（折叠item）-->
  <template v-if="item?.children?.length">
    <el-sub-menu :index="item.path" v-if="!item.hidden">
      <template #title>
        <svg-icon :name="item.meta?.icon || 'fenlei'" />
        <span>{{ item.meta.title }}</span>
      </template>
      <!-- 递归组件 调用自己 -->
      <my-sub-menu
        v-for="i in item.children"
        :key="i.path"
        :item="i"
      ></my-sub-menu>
    </el-sub-menu>
  </template>
  <!-- 否则就渲染成menu-item-->
  <template v-else>
    <el-menu-item :index="item.path" v-if="!item.hidden">
      <!-- <svg-icon :name="item.meta?.icon || 'fenlei'" /> -->
      <template #title>
        <span>{{ item.meta.title }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup>
import MySubMenu from "./sub-menu.vue"; // 导入自己
import svgIcon from "@/components/svgIcon/svg.vue";
defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
</script>
<style lang="scss" scoped>
:deep(.el-menu) {
  margin-top: 10px;
}
.item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .icon {
    display: flex;
    width: 20px;
    height: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    flex: 1;
    font-weight: bold;
    color: #fff;
    text-align: center;
  }
}
.el-menu-item {
  height: 48px;
  font-size: 16px;
  border-left: 5px solid transparent;

  > span {
    font-size: 16px;
  }
}

:deep(.el-sub-menu__title) {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: url("@/assets/images/box/sub-title-icon.svg");
  margin-bottom: 5px;
  .el-sub-menu__icon-arrow {
    width: 15px;
    height: 15px;
    color: #fef900;
    svg {
      width: 100%;
      height: 100%;
    }
  }
}

.el-menu-item.is-active {
  background: rgba(182, 220, 255, 0.15);
  border-right: 5px solid #1890ff;
}

.is-active {
  :deep(.el-sub-menu__title.el-tooltip__trigger) {
    background-color: #ecf5ff;
    border-left: 5px solid #409eff;
  }
}
</style>
